<template>
  <view class="canvasControl">
    <view class="canvasControl-container">
      <view class="switch flex">
        <text>画框开关</text>
        <switch checked @change="switch1Change" style="transform: scale(0.7)" />
      </view>
      <view class="info flex" v-if="!noDetail">
        <view class="info-item">
          <view class="title">卷烟厂</view>
          <view>{{ getFactoryName | notPut }}</view>
        </view>
        <view class="info-item">
          <view class="title">牌号</view>
          <view>{{ getBrandName | notPut }}</view>
        </view>
        <view class="info-item" v-show="showPosi">
          <view class="title">摆放位置</view>
          <view>{{ getPlacementPosition }}</view>
        </view>
        <view class="info-item">
          <view @click="fullScreen"> 全屏查看 </view>
          <!--   <view>
              <view>
                全屏查看
              </view>
              <view>
                保存到手机
              </view>
          </view> -->
          <!-- <button type="primary" size="mini" @click="fullScreen">
            全屏查看
          </button> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: ["selectData","noDetail"],
  filters: {
    notPut(val) {
      if (val === "image" || val === "vague") {
        return "未入库";
      }
      return val;
    }
  },
  computed: {
    getFactoryName() {
      if (this.selectData && "name" in this.selectData)
        return this.selectData.name.split("_")[0];
      return "--";
    },
    getBrandName() {
      if (this.selectData && "name" in this.selectData)
        return this.selectData.name.split("_")[1];
      return "--";
    },
    getPlacementPosition() {
      if (
        this.selectData &&
        "row" in this.selectData &&
        "col" in this.selectData
      )
        return this.selectData.row + "行" + this.selectData.col + "列";
      return "--";
    }
  },
  data() {
    return { showPosi: false };
  },
  onLoad() {},
  mounted() {
    this.showPosi = getCurrentPages()[0].route !== "pages/inventory/index";
  },
  methods: {
    fullScreen() {
      this.$emit("fullScreen");
    },
    switch1Change(item) {
      this.$emit("changeSwitch", item.detail.value);
    }
  }
});
</script>

<style lang="scss" scoped>
.canvasControl {
  // height: 221rpx;
  padding: 21rpx 29rpx;
  overflow: hidden;
  &-container {
    background: #ffffff;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    // padding: 29rpx;

    .switch {
      //   height: 97rpx;
      font-size: 29rpx;
      font-weight: 500;
      color: #405680;
      padding: 29rpx;
      border-width: 0;
      border-bottom-width: 2rpx;
      border-style: solid;
      border-color: #e1e6f0;
    }
    .info {
      padding: 21rpx 29rpx;
      font-size: 25rpx;
      font-weight: 400;
      color: #405680;
      .title {
        color: #40568060;
      }
    }
  }
}
</style>
